<template>
    <section class="search-salesman-main base-main">
      <div class="search-box bgcFFF">
        <input type="text" v-model="value" placeholder="姓名或手机号" ref="$input">
        <i class="clear-val inline-block pa fs12  iconfont iconcha1" v-if="value.length > 0" @click="clearVal"></i>
        <span class="flr color666 fs15" @click="handleSearch">搜索</span>
      </div>
      <div class="search-record-title color999AA3 fs12 pdlr15" v-if="recordData.length > 0">
        搜索记录
      </div>
      <AalesmanList
        :data="recordData"
        :type="3"
        @handleDel="handleDel"
      ></AalesmanList>
      <div class="clear-record text-c" v-if="recordData.length > 0">
        <span class="text-c fs14 color999AA3" @click="handleClearAll">清除搜索历史</span>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  import AalesmanList from '../../components/AalesmanList.vue'

  export default {
    components:{
      AalesmanList,
    },
    data() {
      return {
        value:'',
        recordData:[
          {
            id:1,
            pic:'https://p20.ssl.qhimgs3.com/dr/240_240_/t015540fc8db1807b91.jpg?t=1540843399',
            name:'张三',
            phone:'13659874254'
          },
          {
            id:2,
            pic:'https://p20.ssl.qhimgs3.com/dr/240_240_/t015540fc8db1807b91.jpg?t=1540843399',
            name:'李四',
            phone:'13659874254'
          },
          {
            id:3,
            pic:'https://p20.ssl.qhimgs3.com/dr/240_240_/t015540fc8db1807b91.jpg?t=1540843399',
            name:'王五',
            phone:'13659874254'
          },
          {
            id:4,
            pic:'https://p20.ssl.qhimgs3.com/dr/240_240_/t015540fc8db1807b91.jpg?t=1540843399',
            name:'蔡徐坤',
            phone:'13659874254'
          },

        ],//数据
      }
    },
    created(){

    },
    methods: {
      //搜索
      handleSearch(){
        this.$router.replace({
          path:'/index/web/searchSalesmanResult',
          query:{
            text:this.value,
          }
        })
      },
      clearVal(){
        this.value = '';
        this.$refs.$input.focus();
      },
      //删除单条记录
      handleDel(item){
        this.$dialog.confirm({
          title: '删除',
          message: '确定删除此条记录？'
        }).then(() => {
          this.recordData.splice(index,1);
          this.$toast.success('删除成功');
        }).catch(() => {
//            console.log('cancel');
          // on cancel
        });
      },
      //删除所有记录
      handleClearAll(){
        this.$dialog.confirm({
          title: '删除',
          message: '确定删除所有记录？'
        }).then(() => {
          this.recordData = [];
          this.$toast.success('删除成功');

        }).catch(() => {

        });
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/searchSalesman.scss';
</style>
